/**
 * 知识点：redux 基本使用 - 创建仓库
 *
 *    1. createStore 创建仓库的时候必须传入一个函数，这个传入的函数官方成为 reducer 函数
 *        🔔语法： createStore( (state, action)=> newState )
 *                reducer 函数第一个形参为 state
 *                reducer 函数第二个形参为 action
 *                reducer 函数每次调用返回 state
 *
 *    2. store 仓库实例有 3个重要 API
 *          store.getState()             获取仓库数据
 *          store.dispatch(action)       修改仓库数据
 *          store.subscribe(listener)    订阅仓库数据(监听)，返回一个用于取消订阅(监听)的函数
 *
 */

import { createStore } from 'redux'

// 初始值
const initState = {
  msg: '',
  count: 1,
}

function reducer(state = initState, action) {
  switch (action.type) {
    case 'add':
      return { ...state, count: state.count + 1 }
    case 'minus':
      return { ...state, count: state.count - 1 }
    default:
      return state
  }
}

const store = createStore(reducer)

// 调用 store.subscribe() 用于订阅(监听)仓库数据，返回取消订阅(监听)的函数
const unSubscribe = store.subscribe(function () {
  // 仓库数据变化后干点什么
  console.log('获取变化后仓库的数据', store.getState())
  document.write(`<h1>${JSON.stringify(store.getState())}</h1>`)
})

// dispatch 修改
store.dispatch({ type: 'add' })
store.dispatch({ type: 'add' })

// 取消订阅(监听)
unSubscribe()

// 后面的 dispatch 修改不会触发订阅(监听)
store.dispatch({ type: 'add' })
store.dispatch({ type: 'add' })
store.dispatch({ type: 'add' })
